<template>
	<view class="page">
		<u--form errorType="toast" :model="form" ref="myForm" labelWidth="100">
			<u-form-item label="当前密码" prop="oldPassword" borderBottom>
				<u-input v-model="form.oldPassword" border="none" :type="inpty1?'text':'password'">
					<template slot="suffix">
						<u-icon :name="inpty1?'eye':'eye-fill'" color="#e54d42" size="20" @click="inpty1 = !inpty1"/>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item label="新密码" prop="password" borderBottom>
				<u-input v-model="form.password" border="none" type="number" :type="inpty2?'text':'password'">
					<template slot="suffix">
						<u-icon :name="inpty2?'eye':'eye-fill'" color="#e54d42" size="20" @click="inpty2 = !inpty2"/>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item label="确认新密码" prop="repassword" borderBottom>
				<u-input v-model="form.repassword" border="none" :type="inpty3?'text':'password'" >
					<template slot="suffix">
						<u-icon :name="inpty3?'eye':'eye-fill'" color="#e54d42" size="20" @click="inpty3 = !inpty3"/>
					</template>
				</u-input>
			</u-form-item>
		</u--form>
		<view class="bottom-button">
			<u-button type="primary" size="large" text="保存修改" @click="submit" color="#e54d42"></u-button>
		</view>
		<u-toast ref="myToast"></u-toast>
	</view>
</template>

<script>
	import { mapMutations } from "vuex"
	export default {
		data() {
			return {
				inpty1:false,
				inpty2:false,
				inpty3:false,
				form: {
					oldPassword: '',
					password: '',
					repassword: ''
				},
				rules: {
					oldPassword: [{
						required: true,
						message: '请输入当前密码',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '新密码6到16个字符',
						min: 6,
						max: 16,
						trigger: ['blur', 'change']
					}],
					repassword: [{
						required: true,
						message: '确认密码不能为空',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			...mapMutations(['logout']),
			submit() {
				let that = this
				this.$refs.myForm.validate().then( ()=> {
					if(that.form.repassword !== that.form.password){
						that.$refs.myToast.show({
							message: '确认密码不一致!'
						})
					}else {
						that.$reqJsonPost('EditLoginUserPassWord', that.form).then(res=>{
							if(res.code === 0){
								that.logout()
								that.$refs.myToast.show({
									message: res.msg,
									complete(){
										uni.reLaunch({
											url:'/pages/login/login'
										})
									}
								})
							}else {
								that.$refs.myToast.show({
									message: res.msg
								})
							}
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 30rpx;
		background-color: #fff;
	}
</style>
